<template>
  <scroll-view @scrolltolower="scrolltolower" class="scroll-view" scroll-y>
    <view
      class="appeal_item"
      @tap="handleAppeal(ele)"
      v-for="(ele, index) in list"
      :key="index"
    >
      <view class="appeal_name">{{ ele.taskName }}</view>
      <view class="appeal_date">
        <text class="iconfont icon-24gl-calendar"></text>
        <text>{{ ele.listenCourseDate }}</text>
      </view>
      <view class="appeal_time">
        <text class="iconfont icon-naozhong"></text>
        <text>{{ ele.startTime + "-" + ele.endTime }}</text>
      </view>
      <!-- <view class="appeal_room">
        <text class="iconfont icon-dingwei1"></text>
        <text>202室</text>
      </view> -->
      <view class="handleappeal">
        <view class="who">{{ ele.teacherUserName }} 发起申诉</view>
        <view class="liji">立即处理</view>
      </view>
    </view>
    <fl-empty v-if="list.length === 0" />
    <view style="padding: 10rpx 0">
      <view class="none" v-if="isFinish">没有更多了~</view>
      <view class="loadMore" v-if="isMore">正在加载...</view>
    </view>
  </scroll-view>
  <up-overlay :show="isShow" @click="isShow = false">
    <view class="warp">
      <view class="rect" @tap.stop>
        <view style="margin-bottom: 20rpx">审核意见:</view>
        <view>
          <up-textarea
            v-model="approveReason"
            placeholder="请输入内容"
            count
          ></up-textarea>
        </view>
        <view class="appear_btn">
          <view class="no" @tap="handlepass('3')">拒绝</view>
          <view class="pass" @tap="handlepass('2')">通过</view>
        </view>
      </view>
    </view>
  </up-overlay>
</template>

<script setup>
import { ref, nextTick } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { courseEvalTaskList, appealCheck } from "@/api/courseEvaluateCont/received";
const query = {
  pageNum: 1,
  pageSize: 10,
  tabType: "2",
};
const list = ref([]);
const total = ref(0);
const typeUser = ref("");
const currentVal = ref({});
const isFinish = ref(false);
const isShow = ref(false);
const isMore = ref(false);
const approveReason = ref("");
function handleNav(url) {
  uni.navigateTo({ url: url });
}
function scrolltolower() {
  if (query.pageNum * query.pageSize >= total.value) {
    isFinish.value = true;
    isMore.value = false;
    return;
  }
  query.pageNum += 1;
  isMore.value = true;
  getList();
}
function handleAppeal(ele) {
  // 1已下发 2 申诉 3 已完成  4 分析汇总
  // currentVal.value = ele;
  // isShow.value = true;
  // uni.setStorageSync("courses", ele);
  // let url = `?typeUser=${typeUser.value}&status=4`;
  uni.setStorageSync("courses", ele);
  uni.navigateTo({
    url: "/pages/courseEvaluateContTaskLookDetail/index?status=2&id=" + ele.id,
  });
}
async function getList() {
  let res = await courseEvalTaskList(query);

  list.value = [...list.value, ...res.rows];
  total.value = res.total;
}
async function handlepass(type) {
  let par = {
    id: currentVal.value.id,
    approveReason: approveReason.value,
    approveStatus: type,
  };
  await appealCheck(par);
  isShow.value = false;
  reset();
  getList();
}
onLoad((options) => {
  typeUser.value = options.type;
  getList();
});
onShow(() => {
  if (uni.getStorageSync("load") === "1") {
    console.log("等于多少");
    nextTick(() => {
      reset();
      getList();
      uni.removeStorageSync("load");
    });
  }
});
const reset = () => {
  isFinish.value = false;
  isMore.value = false;
  query.pageNum = 1;
  list.value = [];
  total.value = 0;
};
</script>

<style lang="scss" scoped>
.warp {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.rect {
  width: 600rpx;
  min-height: 320rpx;
  background-color: #fff;
  padding: 30rpx 30rpx 0rpx 30rpx;
  border-radius: 10rpx;
  .appear_btn {
    display: flex;
    height: 100rpx;
    .pass,
    .no {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
    }
  }
}
.scroll-view {
  height: 100%;
  .appeal_item {
    width: 685rpx;
    background-color: #fff;
    border-radius: 12rpx;
    margin: 0 auto 30rpx;
    padding: 15rpx 25rpx 20rpx;
    &:nth-child(1) {
      margin-top: 20rpx;
    }
    .handleappeal {
      display: flex;
      align-items: center;
      height: 70rpx;
      align-items: center;
      font-size: 28rpx;
      color: #ff1818;
      justify-content: space-between;
      border-top: 2rpx solid #eeeeee;
      padding-top: 15rpx;
      .liji {
        text-align: center;
        line-height: 55rpx;
        width: 175rpx;
        height: 55rpx;
        border-radius: 28rpx;
        border: 2rpx solid #ff1818;
      }
    }
    .appeal_name {
      width: 90%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 28rpx;
      color: #292929;
      font-weight: 700;
      margin-bottom: 11rpx;
    }
    .appeal_date,
    .appeal_time,
    .appeal_room {
      font-size: 24rpx;
      color: #666666;
      margin-bottom: 8rpx;
      .iconfont {
        font-size: 24rpx;
        margin-right: 8rpx;
      }
    }
  }
}
</style>
